<template>
  <div class="recommend">
    <Bast :item="info">
      <div class="title acea-row row-center-wrapper">
        <div class="line"></div>
        <div class="name">
          <van-icon
            v-if="this.$route.params.id == 1"
            size="0.38rem"
            name="gem-o"
          />
          <van-icon
            v-if="this.$route.params.id == 2"
            size="0.38rem"
            name="fire-o"
          />
          <van-icon
            v-if="this.$route.params.id == 3"
            size="0.38rem"
            name="new-o"
          />

          <span>{{ str }}</span>
        </div>
        <div class="line"></div>
      </div>
    </Bast>
  </div>
</template>

<script>
import Bast from "@/components/Bast";
export default {
  data() {
    return {
      info: null,
      str: "",
    };
  },
  components: {
    Bast,
  },
  created() {
    this.$axios
      .get("/api/groom/list/" + this.$route.params.id + "?page=1")
      .then((d) => {
        this.info = d.data.data;
      });

    if (this.$route.params.id == 1) {
      this.str = "精品推荐";
    } else if (this.$route.params.id == 2) {
      this.str = "热门榜单";
    } else if (this.$route.params.id == 3) {
      this.str = "首发新品";
    }
  },
};
</script>

<style scoped lang="less">
.title {
  height: 1.2rem;
  font-size: 0.4rem;
  color: #282828;

  display: flex;
  align-items: center;
  justify-content: center;

  .line {
    width: 2.3rem;
    height: 0.04rem;
    background-color: #e9e9e9;
  }
  .name {
    margin: 0 0.2rem;

    span {
      font-size: 0.38rem;
      vertical-align: middle;
    }
    i {
      vertical-align: middle;
    }
  }
}
</style>